<template>
	<!-- #ifdef APP-PLUS-NVUE -->

	<!--  #endif -->
	<view class="container">
		<!-- <uni-nav-bar :fixed="true" title="选择工作站" :statusBar="true"   rightText="确定" leftIcon="left" >
			<block slot="left">
				<view class="custom-nav-back">
					<uni-icons type="back" size="20"></uni-icons>
					<text class="custom-txt">返回</text>
				</view>
			
			</block>
			<block slot="right">
				<text class="custom-txt custom-enter">确定</text>
			</block>
		</uni-nav-bar> -->
		<view class="search-view">
			<view class="input-view">
				<uni-icons class="input-uni-icon" type="search" size="18" color="#999" />
				<input v-model="inputValue" confirm-type="search" class="nav-bar-input" type="text" placeholder="请输入工序首字母进行过滤" @confirm="confirm" />
			</view>
			<view class="search-txt" @click="search">过滤</view>
		</view>

		<view class="grid-content-container">
			<uni-grid :column="4" :showBorder="true" :square="true">
				<uni-grid-item :class="{ active: computedIsActiveSidte(site) }" class="uni-grid-item" v-for="(site, index) in filterSites" :key="index">
					<view class="item" @click="itemClick(site)">
						<text class="title-txt">{{ site.workstationCode }}</text>
						<text class="text">{{ site.workstationName }}</text>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			sites: [],
			activeSite: undefined,
			inputValue: '', //搜索框
			filterTxt: '', //搜索时过滤文字
			filterSites: [], //过滤后结果
			isSearchModel: false //当前是否是搜索
		};
	},
	onLoad(options) {
		this.refreshData();
	},
	onPullDownRefresh() {
		this.refreshData();
	},
	onReachBottom() {},
	onNavigationBarButtonTap(button) {
		if (button.id == 'selectDone') {
			if (!this.activeSite) {
				uni.showToast({
					title: '请选择工作站',
					icon: 'none'
				});
				return;
			}
			uni.showModal({
				title: '确认绑定',
				content: '确认绑定当前工作站？',
				showCancel: true,
				cancelText: '取消',
				confirmText: '确认',
				success: res => {
					if (res.confirm) {
						// 用户点击确定
						this.$u.api.workstation
							.workstation({
								userId: this.vuex_user.userId,
								workstationCode: this.activeSite.workstationCode,
								operationFlag: 'Y'
							})
							.then(res => {
								this.$u.vuex('vuex_bind_workstation_code', this.activeSite.workstationCode);
								console.log('/pages/sys/build_product/index?workstationCode=' + this.activeSite.workstationCode);
								uni.redirectTo({
									url: '/pages/sys/build_product/index?workstationCode=' + this.activeSite.workstationCode
								});
							})
							.catch(err => {
								console.log(err);
							});
					} else {
						// 否则点击了取消
					}
				}
			});
		}
	},
	methods: {
		search() {
			this.filterList();
		},
		filterList() {
			if (!this.sites || !this.sites.length) {
				console.log('2342');
				return [];
			}
			if (!this.isSearchModel) {
				return this.sites;
			}
			return this.sites.filter(item => {
				console.log(item.workstationCode.indexOf(this.filterTxt) != -1 || item.workstationCode.indexOf(this.filterTxt) != -1);
				return item.workstationCode.indexOf(this.filterTxt) != -1 || item.workstationCode.indexOf(this.filterTxt) != -1;
			});
		},
		refreshData() {
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			this.$u.api.workstation
				.getWorkstationList()
				.then(res => {
					uni.hideLoading();
					this.sites = res?.data || [];
					this.filterSites = this.filterList();
				})
				.catch(err => {
					uni.hideLoading();
					console.log(err);
				});
		},
		confirm() {
			this.filterTxt = this.inputValue;
			if (this.inputValue.trim() != '') {
				this.isSearchModel = true;
			} else {
				this.isSearchModel = false;
			}
			this.filterSites = this.filterList();
		},
		computedIsActiveSidte(siteItem) {
			if (!this.activeSite || !siteItem) {
				return false;
			}
			return siteItem.workstationId == this.activeSite.workstationId;
		},
		itemClick(siteItem) {
			if (!siteItem) {
				return;
			}
			this.activeSite = siteItem;
		}
	}
};
</script>

<style lang="scss">
$nav-height: 80rpx;

.search-view {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin: 30rpx;

	.search-txt {
		font-size: 28rpx;
		color: #333333;
	}
}

.input-view {
	/* #ifndef APP-PLUS-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	// width: 500rpx;
	flex: 1;
	background-color: #f8f8f8;
	height: $nav-height;
	border-radius: 30rpx;
	padding: 0 30rpx;
	flex-wrap: nowrap;
	margin: 14rpx 30rpx 14rpx 0rpx;
	line-height: $nav-height;
}

.input-uni-icon {
	line-height: $nav-height;
}

.nav-bar-input {
	height: $nav-height;
	line-height: $nav-height;
	flex: 1;
	/* #ifdef APP-PLUS-NVUE */
	width: 370rpx;
	/* #endif */
	padding: 0 10rpx;
	font-size: 24rpx;
	background-color: #f8f8f8;
}

.grid-content-container {
	padding: 30rpx;

	.uni-grid-item {
		display: flex;
		flex-direction: column;
		&.active {
			background-color: #f1f1f1;
		}
	}

	.item {
		display: flex;
		flex: 1;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		padding: 10rpx 15rpx;
		.text {
			text-align: center;
		}
		.title-text {
			text-align: center;
		}
	}
}
.custom-nav-back {
	display: flex;
	flex-direction: row;
	align-items: center;
}
.custom-txt {
	font-size: 24rpx;
	color: #333333;
}
.custom-enter {
	color: #3c9cff;
}
</style>
